<template>
  <view class="login-container">
    <!-- 背景装饰 -->
    <view class="bg-decoration">
      <view class="circle circle-1"></view>
      <view class="circle circle-2"></view>
      <view class="circle circle-3"></view>
    </view>
    
    <!-- 登录卡片 -->
    <view class="login-card">
      <!-- 头部标题 -->
      <view class="card-header">
        <view class="logo">
          <text class="logo-icon">📚</text>
        </view>

        <view class="subtitle">欢迎回来，请登录您的账户</view>
      </view>
      
      <!-- 登录表单 -->
      <view class="login-form">
        <!-- 用户名输入框 -->
        <view class="input-group">
          <view class="input-wrapper">
            <text class="input-icon">👤</text>
            <input 
              class="form-input" 
              type="text" 
              v-model="account" 
              maxlength="30" 
              placeholder="请输入用户名" 
              placeholder-class="input-placeholder"
            />
          </view>
        </view>
        
        <!-- 密码输入框 -->
        <view class="input-group">
          <view class="input-wrapper">
            <text class="input-icon">🔒</text>
            <input 
              class="form-input" 
              :password="true"
              v-model="password" 
              maxlength="30" 
              placeholder="请输入密码" 
              placeholder-class="input-placeholder"
            />
          </view>
        </view>

        <!-- 登录按钮 -->
        <view class="login-btn" @click="submitLogin" :class="{ 'loading': isLoading }">
          <text v-if="!isLoading" class="btn-text">立即登录</text>
          <text v-else class="btn-text">登录中...</text>
          <view v-if="isLoading" class="loading-spinner"></view>
        </view>
        
        <!-- 底部提示 -->
        <view class="form-footer">
          <text class="footer-text">登录即表示同意用户协议和隐私政策</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import store from '@/store'
  import * as LoginApi from '@/api/login'
  import * as Verify from '@/utils/verify'

  export default {
    props: {
      // 是否存在第三方用户信息
      isParty: {
        type: Boolean,
        default: () => false
      },
      // 第三方用户信息数据
      partyData: {
        type: Object
      }
    },

    data() {
      return {
        // 正在加载
        isLoading: false,
        // 账号
        account: '',
        // 密码
        password: ''
      }
    },



    methods: {

      // 表单验证
      formValidation() {
        const app = this
        if (!app.validteAccount(app.account) || !app.validtePassword(app.password)) {
            return false
        }
        return true;
      },

      // 验证账号
      validteAccount(str) {
        if (Verify.isEmpty(str)) {
            this.$toast('请先输入您的用户名')
            return false
        }
        if (str.length < 5) {
            this.$toast('用户名不能少于5位')
            return false
        }
        return true
      },
      // 验证密码
      validtePassword(str) {
        if (Verify.isEmpty(str)) {
            this.$toast('请先输入您的密码')
            return false
        }
        if (str.length < 6) {
            this.$toast('密码不能少于6位')
            return false
        }
        return true
      },



      // 确认登录
      submitLogin() {
        const app = this
        if (!app.formValidation()) {
          return false
        }
        app.isLoading = true
        const data = {
            username: app.account,
            password: app.password
        };
        store.dispatch('Login', data)
          .then(result => {
            if (result.code === 0) {
                // 登录成功，跳转到英文页面
                app.$toast('登录成功')
                uni.reLaunch({
                  url: '/pages/book/english'
                })
            } else {
                app.$error(result.msg || '登录失败');
            }
          })
          .catch(error => {
            app.$error(error.msg || '登录失败')
          })
          .finally(() => app.isLoading = false)
      },
      
      /**
       * 去授权认证
       * */
      isNeedAuth(loginInfo) {
         this.onNavigateBack(1);
      },

      /**
       * 登录成功-跳转回原页面
       */
      onNavigateBack(delta) {
        uni.navigateBack({
          delta: Number(delta || 1)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-container {
    position: relative;
    min-height: calc(100vh - var(--window-top));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    overflow: hidden;
  }

  // 背景装饰
  .bg-decoration {
    position: absolute;
    top: var(--window-top, 0);
    left: 0;
    width: 100%;
    height: calc(100% - var(--window-top, 0));
    pointer-events: none;
    
    .circle {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      animation: float 6s ease-in-out infinite;
      
      &.circle-1 {
        width: 200rpx;
        height: 200rpx;
        top: 10%;
        left: 10%;
        animation-delay: 0s;
      }
      
      &.circle-2 {
        width: 150rpx;
        height: 150rpx;
        top: 60%;
        right: 15%;
        animation-delay: 2s;
      }
      
      &.circle-3 {
        width: 100rpx;
        height: 100rpx;
        bottom: 20%;
        left: 20%;
        animation-delay: 4s;
      }
    }
  }

  @keyframes float {
    0%, 100% {
      transform: translateY(0px) rotate(0deg);
    }
    50% {
      transform: translateY(-20px) rotate(180deg);
    }
  }

  // 登录卡片
  .login-card {
    position: relative;
    width: 100%;
    max-width: 600rpx;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 32rpx;
    padding: 60rpx 50rpx;
    box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
    animation: slideUp 0.8s ease-out;
  }

  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(50px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  // 卡片头部
  .card-header {
    text-align: center;
    margin-bottom: 60rpx;
    
    .logo {
      margin-bottom: 30rpx;
      
      .logo-icon {
        font-size: 80rpx;
        display: inline-block;
        animation: bounce 2s infinite;
      }
    }
    
    .title {
      font-size: 48rpx;
      font-weight: 700;
      color: #2d3748;
      margin-bottom: 16rpx;
      letter-spacing: 1rpx;
    }
    
    .subtitle {
      font-size: 28rpx;
      color: #718096;
      line-height: 1.5;
    }
  }

  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-10px);
    }
    60% {
      transform: translateY(-5px);
    }
  }

  // 表单样式
  .login-form {
    .input-group {
      margin-bottom: 32rpx;
      
      .input-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        background: #f7fafc;
        border: 2rpx solid #e2e8f0;
        border-radius: 16rpx;
        padding: 0 24rpx;
        height: 96rpx;
        transition: all 0.3s ease;
        
        &:focus-within {
          border-color: #667eea;
          background: #fff;
          box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1);
        }
        
        .input-icon {
          font-size: 32rpx;
          margin-right: 20rpx;
          color: #a0aec0;
        }
        
        .form-input {
          flex: 1;
          font-size: 32rpx;
          color: #2d3748;
          background: transparent;
          border: none;
          outline: none;
          
          &::placeholder {
            color: #a0aec0;
          }
        }
      }
    }
    
    // 登录按钮
    .login-btn {
      width: 100%;
      height: 96rpx;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 40rpx;
      margin-bottom: 32rpx;
      box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
      transition: all 0.3s ease;
      cursor: pointer;
      
      &:active {
        transform: translateY(2rpx);
        box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
      }
      
      &.loading {
        background: #a0aec0;
        cursor: not-allowed;
        
        &:active {
          transform: none;
        }
      }
      
      .btn-text {
        font-size: 32rpx;
        font-weight: 600;
        color: #fff;
        letter-spacing: 2rpx;
      }
      
      .loading-spinner {
        width: 32rpx;
        height: 32rpx;
        border: 4rpx solid rgba(255, 255, 255, 0.3);
        border-top: 4rpx solid #fff;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-left: 16rpx;
      }
    }
    
    // 表单底部
    .form-footer {
      text-align: center;
      
      .footer-text {
        font-size: 24rpx;
        color: #a0aec0;
        line-height: 1.5;
      }
    }
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  // 输入框占位符样式
  .input-placeholder {
    color: #a0aec0 !important;
    font-size: 28rpx !important;
  }
</style>
